<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="zh-cn">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>商城</title>

		<link rel="stylesheet" type="text/css" href="${ctxStatic}/IDH/css/commodity_list.css" />
		<%@ include file="/WEB-INF/views/modules/marketHeader.jsp"%>
		<!-- swiper -->
		<link rel="stylesheet" type="text/css" href="${ctxStatic}/swiper/swiper-3.4.0.min.css">
		<link rel="stylesheet" type="text/css" href="${ctxStatic}/IDH/css/marketHome.css">
		<script src="${ctxStatic}/swiper/swiper-3.4.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="${ctxStatic}/IDH/js/marketHome.js" type="text/javascript" charset="utf-8"></script>
		<style>
			/* .swiper-slide {
				margin-right:0px !important;
			} */
			.swiper-slide a {
				height: 100%;
				width:100%;
				text-align: center;
				display: block;
			}
			.swiper-slide a img {
				max-height: 100%;
				max-width: 100%;
			}
			
			@media all and (max-width: 640px){
				.swiper-slide {
					height: 15em;
					font-size: 14px;
				}
			}
		</style>
	</head>
	<body>
		<input id="navActive" value="1" type="hidden">
		<!--导航高亮存值-->
		<!-- Swiper phone-->
		<div class="phone swiper-container visible-xs-block">
			<!-- 巨幕图片 -->
			<div class="swiper-wrapper">
				<c:forEach items="${advertisingPohoto }" var="pohoto">
					<div class="swiper-slide clearfix">
						<a href="${empty pohoto.photoUrl ? '#' : pohoto.photoUrl }"><img src="${uploadPath }${pohoto.photoName }" /></a>
					</div>
				</c:forEach>
			</div>
			<!-- Add Pagination -->
			<div class="swiper-pagination"></div>
		</div>
		<section class="container content">
			<div class="col-xs-12 hidden-xs">
				<div class="row">
					<!-- Swiper -->
					<div class="swiper-container">
						<!-- 巨幕图片 -->
						<div class="swiper-wrapper">
							<c:forEach items="${advertisingPohoto }" var="pohoto">
								<div class="swiper-slide clearfix">
									<a href="${empty pohoto.photoUrl ? '#' : pohoto.photoUrl }"><img src="${uploadPath }${pohoto.photoName }" /></a>
								</div>
							</c:forEach>
						</div>
						<!-- Add Pagination -->
						<div class="swiper-pagination"></div>
						<!-- Add Arrows -->
						<div class="swiper-button-next"></div>
						<div class="swiper-button-prev"></div>
					</div>
				</div>
			</div>

			<!--精选商品-->

			<div class="col-xs-12">

				<div class="row">
					<div class="col-xs-12">
						<lable class="title">
							———&nbsp;&nbsp;精选商品&nbsp;&nbsp;———
						</lable>
						<a class="more" href="javascript:void(0);" onclick="changeAction()">查看更多></a>
					</div>
					<!-- PC端精选商品 -->
					<div class="col-xs-12">
						<div class="row">
							<c:forEach items="${page1.list }" var="genProduct" varStatus="ss">
								<c:if test="${ss.index < 2 }">
									<div class="item col-lg-6 col-xs-6 col-xs-12 PC-module">
										<a href="${ctxf}/front/product/genProduct/detail?id=${genProduct.id}">
											<div class="product-box">
												<span class="commodityName">${genProduct.name }</span>
												<span class="commodityPrice">¥${genProduct.nowprice }</span>
												<p class="commodityDetail">${genProduct.introduce }</p>
												<div class="commodityBigImg text-center">
													<img class="middleImg" src="${uploadPath }${genProduct.maxpicture }" />
												</div>
											</div>
										</a>
									</div>
								</c:if>
							</c:forEach>
						</div>
					</div>

					<c:forEach items="${page1.list }" var="genProduct" varStatus="ss">
						<c:if test="${ss.index >= 2 &&  ss.index < 5}">
							<div class="item col-lg-4 col-xs-4 col-xs-12 PC-module">
								<a href="${ctxf}/front/product/genProduct/detail?id=${genProduct.id}">
									<div class="product-box">
										<span class="commodityName">${genProduct.name }</span>
										<span class="commodityPrice">¥${genProduct.nowprice }</span>
										<p class="commodityDetail">${genProduct.introduce }</p>
										<div class="commodityImg text-center">
											<img src="${uploadPath }${genProduct.maxpicture }" />
										</div>
									</div>
								</a>
							</div>
						</c:if>
					</c:forEach>
					<!-- PC端精选商品结束 -->
					<!-- 移动端精选商品 -->
					<c:forEach items="${page1.list }" var="genProduct" varStatus="ss">
						<c:if test="${ss.index < 4 }">
							<div class="item col-xs-6 col-xs-12 phone-module">
								<a href="${ctxf}/front/product/genProduct/detail?id=${genProduct.id}">
									<div class="product-box">
										<span class="commodityName">${genProduct.name }</span>
										<span class="commodityPrice">¥${genProduct.nowprice }</span>
										<p class="commodityDetail">${genProduct.introduce }</p>
										<div class="commodityImg text-center">
											<img src="${uploadPath }${genProduct.maxpicture }" />
										</div>
									</div>
								</a>
							</div>
						</c:if>
					</c:forEach>
					<!-- 移动端精选结束 -->
				</div>
				<a class="phone-more" href="javascript:void(0);" onclick="changeAction()">查看更多</a>
			</div>
			<!--配件-->
			<div class="col-xs-12">
				<div class="row">
					<div class="col-xs-12">
						<lable class="title">
							———&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;配件&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;———
						</lable>
						<a class="more" href="${ctxf}/front/product/genProduct/parts">查看更多></a>
					</div>
					<!-- PC端配件 -->
					<c:forEach items="${page2.list }" var="genProduct" varStatus="ss">
						<c:if test="${ss.index < 6 }">
							<div class="item col-lg-4 col-xs-4 col-xs-12 PC-module">
								<a href="${ctxf}/front/product/genProduct/detail?id=${genProduct.id}">
									<div class="product-box">
										<span class="commodityName">${genProduct.name }</span>
										<span class="commodityPrice">¥${genProduct.nowprice }</span>
										<p class="commodityDetail">${genProduct.introduce }</p>
										<div class="commodityImg text-center">
											<img src="${uploadPath }${genProduct.maxpicture }" />
										</div>
									</div>
								</a>
							</div>
						</c:if>
					</c:forEach>
					<!-- PC端配件 -->
					<!-- 移动端配件 -->
					<c:forEach items="${page2.list }" var="genProduct" varStatus="ss">
						<c:if test="${ss.index < 4 }">
							<div class="item col-xs-6 col-xs-12 phone-module">
								<a href="${ctxf}/front/product/genProduct/detail?id=${genProduct.id}">
									<div class="product-box">
										<span class="commodityName">${genProduct.name }</span>
										<span class="commodityPrice">¥${genProduct.nowprice }</span>
										<p class="commodityDetail">${genProduct.introduce }</p>
										<div class="commodityImg text-center">
											<img src="${uploadPath }${genProduct.maxpicture }" />
										</div>
									</div>
								</a>
							</div>
						</c:if>
					</c:forEach>
					<!-- 移动端配件 -->
				</div>
				<a class="phone-more" href="${ctxf}/front/product/genProduct/parts">查看更多</a>
			</div>

		</section>

		<%@ include file="/WEB-INF/views/modules/marketFooter.jsp"%>

	</body>
	<script type="text/javascript">
		$(document).ready(function() {
			var body_width = document.body.clientWidth + 'px'; 
			$(".phone .swiper-slide a img").css({"width":body_width});
		});
	</script>
</html>